<extend name="./Public/base" />
<block name="title">试卷编辑</block>
<block name="head">
    <load href="__PUBLIC__/Css/question.css"/>
    <load href="__PUBLIC__/Css/header.css"/>
</block>

<block name="header">
    <include file="Application/Home/View/Public/header_question.html" action="edit"/>
</block>
<block name="main">
	<div class="alert alert-danger hidden" role="alert"></div>
    <div class="alert alert-success hidden" role="alert"></div>
    <div class="loading">
		<i class="fa fa-spinner fa-spin fa-3x"></i>
	</div>
	<div class="container" data-spy="scroll" data-target="#scrollspy" id="question-container" style="display:none">
		<div class="row">
			<div class="col-md-4 col-md-offset-2">
				<span class="quiz-name">{{ quiz.qus_name }}</span> 
				<span class="text-muted">{{ quiz.qus_create_time }}</span>
			</div>
		</div>
		<div class="row">
			<div class="col-md-4 col-md-offset-2">
				<button class="btn btn-primary" v-on:click="changeStatusQuiz()" v-if="quiz.qus_status == 0">开始测试</button>
				<button class="btn btn-default" v-on:click="changeStatusQuiz()" v-if="quiz.qus_status == 1">结束测试</button>
				<button class="btn btn-default" v-on:click="changeStatusQuiz()" v-if="quiz.qus_status == 2">继续测试</button>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-2" id="scrollspy">
				<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="180">
					<li>选择试题类型</li>
					<template v-for="item in typeValue">
						<li><button class="btn btn-link" v-on:click="appendQue($index, $event)">{{ item }}</button></li>
					</template>
				</ul>
			</div>
			<div class="col-sm-9">
				<template v-for="que in ques">
					<div class="que-judge" v-if="que.que_type==0">
						<!-- 判断题 -->
						<div class="panel edit-panel" v-show="que.stat">
							<div class="panel-body">
								<div class="box-title">
									<span class="que-title">{{ que.que_num + "、" + typeValue[que.que_type] }}</span>
									<span>分值</span>
									<input type="text" class="que-score que-area" v-model="que.que_score">
									<div class="edit-btn-group pull-right" v-if="que.que_id">
										<a href="javasript:;" title="上移" v-on:click="moveUp($index)"><span class="glyphicon glyphicon-menu-up"></span></a>
										<a href="javasript:;" title="下移" v-on:click="moveDown($index)"><span class="glyphicon glyphicon-menu-down"></span></a>
										<a href="javasript:;" title="删除" v-on:click="delQueConfirm($index)">
											<span class="glyphicon glyphicon-trash"></span>
										</a>
									</div>
								</div>
								<div class="box-body">
									<textarea type="text" class="que-area que-content" rows="1" placeholder="请输入标题" v-model="que.que_content"></textarea>
									<div class="radio" v-for="item in que.que_items">
										<label><input type="radio" v-bind:name="'edit'+que.que_num" v-bind:value="item.index" v-model="que.que_answer">{{ item.value }}</label>
									</div>
								</div>
							</div>
							<div class="panel-footer clearfix">
								<button class="btn btn-primary pull-right" v-on:click="saveQue($index)">保存</button>
								<button class="btn btn-default pull-right" v-on:click="hideEdit($index)">取消</button>
							</div>
						</div>
						<div class="panel display-panel" v-else v-on:click="showEdit($index, $event)">
							<div class="panel-body">
								<div class="box-title">
									<span class="que-title">{{ que.que_num + "、" + typeValue[que.que_type] }}</span>
									<span>分值 {{ que.que_score }}</span>
									<div class="edit-btn-group pull-right">
										<a href="javasript:;" title="上移" v-on:click="moveUp($index)"><span class="glyphicon glyphicon-menu-up"></span></a>
										<a href="javasript:;" title="下移" v-on:click="moveDown($index)"><span class="glyphicon glyphicon-menu-down"></span></a>
										<a href="javasript:;" title="删除" v-on:click="delQueConfirm($index)">
											<span class="glyphicon glyphicon-trash"></span>
										</a>
									</div>
								</div>
								<div class="box-body">
									<p>{{ que.que_content }}</p>
									<div class="radio" v-for="item in que.que_items">
										<label><input type="radio" v-bind:name="'display'+que.que_num" v-bind:value="item.index" v-model="que.que_answer">{{ item.value }}</label>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="que-sinSel" v-if="que.que_type==1">
						<!-- 单选题 -->
						<div class="panel edit-panel" v-show="que.stat">
							<div class="panel-body">
								<div class="box-title">
									<span class="que-title">{{ que.que_num + "、" + typeValue[que.que_type] }}</span>
									<span>分值</span>
									<input type="text" class="que-area que-score" v-model="que.que_score">
									<div class="edit-btn-group pull-right" v-if="que.que_id">
										<a href="javasript:;" title="上移" v-on:click="moveUp($index)"><span class="glyphicon glyphicon-menu-up"></span></a>
										<a href="javasript:;" title="下移" v-on:click="moveDown($index)"><span class="glyphicon glyphicon-menu-down"></span></a>
										<a href="javasript:;" title="删除" v-on:click="delQueConfirm($index)"><span class="glyphicon glyphicon-trash"></span></a>
									</div>
								</div>
								<div class="box-body">
									<textarea type="text" class="que-area que-content" rows="1" placeholder="请输入标题" v-model="que.que_content"></textarea>
									<template v-for="item in que.que_items" track-by="$index">
										<div class="radio">
											<label><input type="radio" v-bind:name="'edit'+que.que_num" v-bind:value="item.index" v-model="que.que_answer">
												{{ item.index | showItemCode }}
											</label>
											<textarea class="que-area que-item" type="text" rows="1" placeholder="请输入选项" v-model="item.value" lazy></textarea>
											<a class="del-item pull-right" href="javasript:;" title="删除" v-on:click="delItem(que, $index)"><span class="glyphicon glyphicon-remove"></span></a>
										</div>
									</template>
									<a href="javascript:;" v-on:click="appendItem(que.que_items)">添加新选项</a>
								</div>
							</div>
							<div class="panel-footer clearfix">
								<button class="btn btn-primary pull-right" v-on:click="saveQue($index)">保存</button>
								<button class="btn btn-default pull-right" v-on:click="hideEdit($index)">取消</button>
							</div>
						</div>
						<div class="panel display-panel" v-else v-on:click="showEdit($index, $event)">
							<div class="panel-body">
								<div class="box-title">
									<span class="que-title">{{ que.que_num + "、" + typeValue[que.que_type] }}</span>
									<span>分值 {{ que.que_score }}</span>
									<div class="edit-btn-group pull-right">
										<a href="javasript:;" title="上移" v-on:click="moveUp($index)"><span class="glyphicon glyphicon-menu-up"></span></a>
										<a href="javasript:;" title="下移" v-on:click="moveDown($index)"><span class="glyphicon glyphicon-menu-down"></span></a>
										<a href="javasript:;" title="删除" v-on:click="delQueConfirm($index)"><span class="glyphicon glyphicon-trash"></span></a>
									</div>
								</div>
								<div class="box-body">
									<p>{{ que.que_content }}</p>
									<div class="radio" v-for="item in que.que_items">
										<label><input type="radio" v-bind:name="'display'+que.que_num" v-bind:value="item.index" v-model="que.que_answer">
											{{ item.index | showItemCode }} {{ item.value }}
										</label>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="que-mulSel" v-if="que.que_type==2">
						<!-- 多选题 -->
						<div class="panel edit-panel" v-show="que.stat">
						<div class="panel-body">
								<div class="box-title">
									<span class="que-title">{{ que.que_num + "、" + typeValue[que.que_type] }}</span>
									<span>分值</span>
									<input type="text" class="que-area que-score" v-model="que.que_score">
									<div class="edit-btn-group pull-right" v-if="que.que_id">
										<a href="javasript:;" title="上移" v-on:click="moveUp($index)"><span class="glyphicon glyphicon-menu-up"></span></a>
										<a href="javasript:;" title="下移" v-on:click="moveDown($index)"><span class="glyphicon glyphicon-menu-down"></span></a>
										<a href="javasript:;" title="删除" v-on:click="delQueConfirm($index)"><span class="glyphicon glyphicon-trash"></span></a>
									</div>
								</div>
								<div class="box-body">
									<textarea type="text" class="que-area que-content" rows="1" placeholder="请输入标题" v-model="que.que_content"></textarea>
									<template v-for="item in que.que_items" track-by="$index">
										<div class="checkbox">
											<label><input type="checkbox" v-bind:name="'edit'+que.que_num" v-bind:value="item.index" v-model="que.que_answer">
												{{ item.index | showItemCode }}
											</label>
											<textarea class="que-area que-item" type="text" rows="1" placeholder="请输入选项" v-model="item.value" lazy></textarea>
											<a class="del-item pull-right" href="javasript:;" title="删除" v-on:click="delItem(que, $index)"><span class="glyphicon glyphicon-remove"></span></a>
										</div>
									</template>
									<a href="javascript:;" v-on:click="appendItem(que.que_items)">添加新选项</a>
								</div>
							</div>
							<div class="panel-footer clearfix">
								<button class="btn btn-primary pull-right" v-on:click="saveQue($index)">保存</button>
								<button class="btn btn-default pull-right" v-on:click="hideEdit($index)">取消</button>
							</div>
						</div>
						<div class="panel display-panel" v-else v-on:click="showEdit($index, $event)">
							<div class="panel-body">
								<div class="box-title">
									<span class="que-title">{{ que.que_num + "、" + typeValue[que.que_type] }}</span>
									<span>分值 {{ que.que_score }}</span>
									<div class="edit-btn-group pull-right">
										<a href="javasript:;" title="上移" v-on:click="moveUp($index)"><span class="glyphicon glyphicon-menu-up"></span></a>
										<a href="javasript:;" title="下移" v-on:click="moveDown($index)"><span class="glyphicon glyphicon-menu-down"></span></a>
										<a href="javasript:;" title="删除" v-on:click="delQueConfirm($index)"><span class="glyphicon glyphicon-trash"></span></a>
									</div>
								</div>
								<div class="box-body">
									<p>{{ que.que_content }}</p>
									<div class="checkbox" v-for="item in que.que_items">
										<label><input type="checkbox" v-bind:name="'display'+que.que_num" v-bind:value="item.index" v-model="que.que_answer">
											{{ item.index | showItemCode }} {{ item.value }}
										</label>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="que-fillSel" v-if="que.que_type==3 || que.que_type==4">
						<!-- 填空题或简答题 -->
						<div class="panel edit-panel" v-show="que.stat">
							<div class="panel-body">
								<div class="box-title">
									<span class="que-title">{{ que.que_num + "、" + typeValue[que.que_type] }}</span>
									<span>分值</span>
									<input type="text" class="que-area que-score" v-model="que.que_score">
									<div class="edit-btn-group pull-right" v-if="que.que_id">
										<a href="javasript:;" title="上移" v-on:click="moveUp($index)"><span class="glyphicon glyphicon-menu-up"></span></a>
										<a href="javasript:;" title="下移" v-on:click="moveDown($index)"><span class="glyphicon glyphicon-menu-down"></span></a>
										<a href="javasript:;" title="删除" v-on:click="delQueConfirm($index)"><span class="glyphicon glyphicon-trash"></span></a>
									</div>
								</div>
								<div class="box-body">
									<textarea type="text" class="que-area que-content" rows="1" placeholder="请输入填空题内容,需要填空的地方用一个下划线表示" v-model="que.que_content" v-if="que.que_type==3"></textarea>
									<textarea type="text" class="que-area que-content" rows="1" placeholder="请输入简答题内容" v-model="que.que_content" v-else></textarea>
									<textarea type="text" class="que-area que-content" rows="1" placeholder="请输入答案" v-model="que.que_answer" v-if="que.que_type==3"></textarea>
									<textarea type="text" class="que-area que-content" rows="1" placeholder="请输入参考答案" v-model="que.que_answer" v-else></textarea>
								</div>
							</div>
							<div class="panel-footer clearfix">
								<button class="btn btn-primary pull-right" v-on:click="saveQue($index)">保存</button>
								<button class="btn btn-default pull-right" v-on:click="hideEdit($index)">取消</button>
							</div>
						</div>
						<div class="panel display-panel" v-else v-on:click="showEdit($index, $event)">
							<div class="panel-body">
								<div class="box-title">
									<span class="que-title">{{ que.que_num + "、" + typeValue[que.que_type] }}</span>
									<span>分值 {{ que.que_score }}</span>
									<div class="edit-btn-group pull-right">
										<a href="javasript:;" title="上移" v-on:click="moveUp($index)"><span class="glyphicon glyphicon-menu-up"></span></a>
										<a href="javasript:;" title="下移" v-on:click="moveDown($index)"><span class="glyphicon glyphicon-menu-down"></span></a>
										<a href="javasript:;" title="删除" v-on:click="delQueConfirm($index)"><span class="glyphicon glyphicon-trash"></span></a>
									</div>
								</div>
								<div class="box-body">
									<p>{{ que.que_content }}</p>
									<p v-if="que.que_type==3">{{ que.que_answer }}</p>
								</div>
							</div>
						</div>
					</div>
				</template>
			</div>
			<!-- 删除试题modal -->
		    <div class="modal fade" id="del-que-modal" role="dialog" aria-labelledby="del-que">
		        <div class="modal-dialog modal-sm">
		            <div class="modal-content">
		                <div class="modal-header">
		                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		                    <h4 class="modal-title text-danger">删除试题</h4>
		                </div>
		                <div class="modal-body">
		                    <p>是否删除选中试题</p>
		                </div>
		                <div class="modal-footer">
		                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		                    <button type="button" class="btn btn-danger btn-del" data-dismiss="modal" v-on:click="delQue()">删除</button>
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
	</div>

	<script type="text/javascript">

		function initVm(quiz, ques) {
			$("#question-container").show();
			vm = new Vue({
				el: "#question-container",
				data: {
					quiz: quiz,
					ques : ques,
					typeValue : ["判断题", "单选题", "多选题", "填空题", "简答题"],
					delIndex: -1,
				},
				methods: {
					showEdit: function(index, event) {
						// 当点击上移等按钮时，阻止触发事件
						if (event.target && event.target.tagName.toLowerCase() == "span") 
							return;

						this.ques[index].stat = true;
						
					},
					hideEdit: function(index) {
						this.ques[index].stat = false;
						// 删除还没保存的题目
						if (!this.ques[index].que_id) {
							
							var i,
								len = this.ques.length;
							for (i = index+1; i < len; i++) {
								this.ques[i].que_num--;
							}
							this.ques.splice(index, 1);
						} else {
							// 恢复题目
							this.ques[index].que_content = this.ques[index].bak_content;
							this.ques[index].que_score   = this.ques[index].bak_score;
							this.ques[index].que_items   = clone(this.ques[index].bak_items);
							this.ques[index].que_answer  = clone(this.ques[index].bak_answer);

						}
					}, 
					appendQue: function(index) {
						var que = new Question("", index, "", this.ques.length+1, [], "", "0", true);
						if (index == 0) { 
							// 判断题
							que.que_items = [new Item("0", "对"), new Item("1", "错")];
						} else if (index == 1) {
							// 单选题
							que.que_items = [new Item("0", ""), new Item("1", ""), new Item("2", ""), new Item("3", "")];
								
						} else if (index == 2) {
							// 多选题
							que.que_items = [new Item("0", ""), new Item("1", ""), new Item("2", ""), new Item("3", "")];
							que.que_answer = [];
						} else if (index == 3 || index == 4) {
							// 填空题或简答题
							que.que_answer = "";
						}
						this.ques.push(que);
						$('html,body').animate({scrollTop:document.body.scrollHeight}); // 滚动到底部

					},
					delQueConfirm: function(index) {
						$("#del-que-modal").modal("toggle");
						this.delIndex = index;
					},
					delQue: function() {
						that = this;
						postApi("__MODULE__/TeaQuiz/deleteQuestion", {que_id: this.ques[this.delIndex].que_id, qus_id: this.quiz.qus_id}, function(err, data) {
							if (err) {
								showError(err.message);
							} else {
								that.ques.splice(that.delIndex, 1);
								var i,
									len = that.ques.length;
								for (i = that.delIndex; i < len; i++) {
									that.ques[i].que_num--;
								}
								showSuccess(data.message);
							}
						})
					},
					moveUp: function(index) {
						if (index == 0) {
							showError("当前是第一题，不能上移")
							return;
						} else {
							that = this;
							postApi("__MODULE__/TeaQuiz/moveUpQuestion", {que_id: ques[index].que_id, qus_id: this.quiz.qus_id}, function(err, data) {
								if (err) {
									showError(err.message);
								} else {
									var remove = that.ques.splice(index, 1);
									that.ques.splice(index-1, 0, remove[0]);
									that.ques[index].que_num++; // 改变序号
									that.ques[index-1].que_num--;
									showSuccess(data.message);
								}
							})
						}
					},
					moveDown: function(index) {
						if (index == this.ques.length-1) {
							showError("当前是最后一题，不能下移")
							return;
						} else {
							that = this;
							postApi("__MODULE__/TeaQuiz/moveDownQuestion", {que_id: ques[index].que_id, qus_id: this.quiz.qus_id}, function(err, data) {
								if (err) {
									showError(err.message);
								} else {
									var remove = that.ques.splice(index, 1);
									that.ques.splice(index+1, 0, remove[0]);
									that.ques[index].que_num--; // 改变序号
									that.ques[index+1].que_num++;
									showSuccess("题目下移成功");
								}
							})
						}
					},
					appendItem: function(items) {
						var i,
							len = items.length;
						if (len >= 8) {
							showError("不能超过八个选项");
							return;
						}
						items.push(new Item(len, ""));
					},
					delItem: function(que, index) { //bug
						var i,
							len = que.que_items.length;
						if (len <= 2) {
							showError("至少需要两个选项");
							return;
						}
						if (que.que_type == 1 && que.que_answer == index) {
							que.que_answer = 0;
						}
						// 删除多选题答案
						var ind;
						if (que.que_type == 2 && (ind = que.que_answer.indexOf(index)) >= 0) {
							que.que_answer.splice(index, 1);
						}

						que.que_items.splice(index, 1);
						
						for (i = index; i < que.que_items.length; i++) {
							que.que_items[i].index--;
						}
					},
					saveQue: function(index) {
						var que = {}; // 构建传给ajax的对象
						    inputQue = this.ques[index],
							itemsLen = inputQue.que_items.length;
						
						// 保存选项
						if (inputQue.que_type < 3) {
							for (i = 1; i <= itemsLen; i++) {
								if (!(que["que_item"+i] = inputQue.que_items[i-1].value)) {
									showError("选项不能为空");
									return;
								}
							} 
						}
						// 保存答案
						if (que["que_answer"] === "" && inputQue.que_type != 4) {
							showError("答案不能为空");
							return;
						}
						if (inputQue.que_type == 2) {
							que["que_answer"] = inputQue.que_answer.join("");
						} else {
							que["que_answer"] = inputQue.que_answer;
						}
						
						// 保存其他
						que["que_type"] = inputQue.que_type;
						if ((que["que_content"] = inputQue.que_content) == "") {
							showError("试题标题不能为空");
							return;
						}
						if (inputQue.que_type != 4) {
							if (inputQue.que_score == "") {
								showError("试题分数不能为空");
								return;
							} else if ((inputQue.que_score > 100 || inputQue.que_score < 1)) {
								showError("请将分数设置在1到100之间");
								return;
							} else if (isNaN(Number(inputQue.que_score)) || inputQue.que_score % 1 != 0) { 
								showError("请输入正确的格式");
								return;
							} else {
								que["que_score"] = inputQue.que_score
							}
						}

						// 保存备份
						this.ques[index].bak_content = this.ques[index].que_content;
						this.ques[index].bak_score = this.ques[index].que_score;
						this.ques[index].bak_items = clone(this.ques[index].que_items);
						this.ques[index].bak_answer = clone(this.ques[index].que_answer);

						if (inputQue.que_id) {
							// 更新
							que["que_id"] = inputQue.que_id;
							postApi("__MODULE__/TeaQuiz/updateQuestion", que, function(err, data) {
								if (err) {
									showError(err.message);
								} else {
									showSuccess(data.message);
								}
							})
						} else {
							// 添加
							que["qus_id"] = this.quiz.qus_id;
							postApi("__MODULE__/TeaQuiz/addQuestion", que, function(err, data) {
								if (err) {
									showError(err.message);
								} else {
									ques[index].que_id = data.data;
									showSuccess(data.message);
								}
							})

						}
						ques[index].stat = false;
					},
					changeStatusQuiz: function() {
						that = this;
						if (this.ques.length < 1 && this.quiz.qus_status == 0) {
							showError("请先添加题目");
							return;
						}
						postApi("__MODULE__/TeaQuiz/changeStatusQuiz", {qus_id: this.quiz.qus_id}, function(err, data) {
							if (err) {
								showError(err.message);
							} else {
								showSuccess(data.message);
								if (that.quiz.qus_status == 2 || that.quiz.qus_status == 0) {
									that.quiz.qus_status = 1;
								} else {
									that.quiz.qus_status = 2;
								}
							}
						})
					}
				}
			})
		}

		$(function() {
			var qus_id = location.search.substring(1).split("=")[1];
			postApi("__MODULE__/TeaQuiz/getQuestion", {qus_id: qus_id}, function(err, data) {
				if (err) {
					showError(err.message);
				} else {
					var ques = data.data.question;
					var quiz = data.data.quiz;

					var i, j, len = ques.length;
					for (i = 0; i < len; i++) {
						ques[i].stat = false;
						// 将选项保存到数组
						ques[i].que_items = [];
						for (j = 1; j <= 8; j++) {
							if (ques[i]["que_item"+j]) {
								ques[i].que_items.push(new Item((j-1)+"", ques[i]["que_item"+j]));
							}
							delete ques[i]["que_item"+j];
						}
						if (ques[i].que_type == 2) {
							ques[i].que_answer = ques[i].que_answer.split("");
						}
						// 备份题目中能修改的项
						ques[i].bak_content = ques[i].que_content;
						ques[i].bak_score = ques[i].que_score;
						ques[i].bak_items = clone(ques[i].que_items);
						ques[i].bak_answer = clone(ques[i].que_answer);
					}
					initVm(quiz, ques);
				}
			})
		})

		// 根据index值设置选项代码
		Vue.filter("showItemCode", function (index) {
			return String.fromCharCode(65+parseInt(index)) + "、";
		})

		// Question构造函数
		function Question(que_id, que_type, que_content, que_num, que_items, que_score, que_answer, stat) {
			this.que_id = que_id;
			this.que_type = que_type;
			this.que_content = que_content;
			this.que_num = que_num;
			this.que_items = que_items;
			this.que_score = que_score;
			this.que_answer = que_answer;
			this.stat = stat; 
		}
		// item构造函数
		function Item(index, value) {
			this.index = index;
			this.value = value;
		}
		// 深复制克隆对象
		function clone(obj){  
		    var o, obj;
		    if (obj == null || typeof obj != "object")
		    	return obj;
		    if (obj.constructor == Object){  
		        o = new obj.constructor();   
		    }else{  
		        o = new obj.constructor(obj.valueOf());   
		    }
		    for(var key in obj){  
		        if (o[key] != obj[key]){   
		            if (typeof(obj[key]) == "object"){   
		                o[key] = clone(obj[key]);  
		            } else {  
		                o[key] = obj[key]; 
		            }  
		        }  
		    } 
		    return o;  
		}  
	</script>
</block>